import { connect } from 'dva';
import React, { PropTypes } from 'react';
import { Link } from 'react-router';
import { Table, Button, Col, Row, Card } from 'antd';

import { fieldsToParams, createPageConfig } from 'src/utils/transform';
import AppInfoCard from 'src/components/biz/AppInfoCard';

import DetailForm from './createForm';
import Query from './query';
import ListCURDCreator from '../creator/list';

function List({ dispatch, index: moduleModel }) {

  const { moduleName } = moduleModel;
  const basePayload = { module: moduleName };
  let { list, toCreate, toUpdate, toDelete, cancelSubmit } = ListCURDCreator(moduleModel, dispatch);

  function toChangeSatatus(e) {
    const id = e.currentTarget.id.split('_')[1];
    dispatch({
      type: moduleName + '/disableItem',
      payload: { id },
    });
  }

  function toQuery(e) {
    const id = e.currentTarget.id.split('_')[1];

    dispatch({
      type: moduleName + '/readBasic',
      payload: id,
    });

    dispatch({
      type: moduleName + '/showQueryModal'
    });
  }

  function handleQuerySubmit(fieldsValue) {
    const postParams = fieldsToParams(fieldsValue);
    dispatch({
      type: moduleName + '/handleQuerySubmit',
      payload: {
        module: moduleName,
        ...postParams,
      },
    });
  }


  function doSubmit(fieldsValue) {
    dispatch({
      type: moduleName + '/updateIndex',
      payload: {
        basicInfo: {
          ...moduleModel.entity.basicInfo,
          ...fieldsValue.basicInfo
        },
        fields: fieldsValue.fields,
      }
    });
  }

  function onDataQueryTypeChange(type) {
     dispatch({ type: moduleName + '/onDataQueryTypeChange',  payload: type});
  }

  function closeQueryModal() {
     dispatch({ type: moduleName + '/closeQueryModal' });
  }

  const paginationInfo = createPageConfig(moduleModel, list);
  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
      width: 30,
    },
    {
      title: '名称',
      dataIndex: 'indexName',
      key: 'indexName',
      width: 80,
    },
    {
      title: '当前版本',
      dataIndex: 'configVersion',
      key: 'configVersion',
      width: 30,
    },
    {
      title: '创建人',
      dataIndex: 'createByName',
      key: 'createByName',
      width: 50,
    },
    {
      title: '分片数',
      dataIndex: 'shardCount',
      key: 'shardCount',
      width: 50,
    },
    {
      title: '副本数',
      dataIndex: 'replicationFactor',
      key: 'replicationFactor',
      width: 50,
    },
    {
      title: '操作',
      width: 130,
      key: 'action',
      render: (text, item) => (
        <div>
          <Row>
            <Col span="3"><a href="javascript:;" onClick={toUpdate} id={`detailId_${item.id}`}>修改</a></Col>
            <Col span="3"><a href="javascript:;" onClick={toDelete} id={`detailId_${item.id}`}>删除</a></Col>
            <Col span="3"><a href="javascript:;" onClick={toChangeSatatus} id={`detailId_${item.id}`}>{item.status === 1 ? '启用' : '禁用'}</a></Col>
            <Col span="6"><Link to={`/datasource?indexId=${item.id}&projectId=${moduleModel.searchParams.projectId}`}>数据源管理</Link></Col>
            <Col span="6"><Link to={`/control?indexId=${item.id}&projectId=${moduleModel.searchParams.projectId}`}>数据源调度</Link></Col>
            <Col span="3"><a href="javascript:;" onClick={toQuery} id={`detailId_${item.id}`}>查数据</a></Col>
          </Row>
        </div>
      ),
    }
  ];

  const { appData, metaTypes, copyPath } = moduleModel.relatedData;

  const appCardConfig = {
    bordered: false,
    title: <div><Row>
        <Col span="20">{appData.name}项目信息</Col>
      </Row></div>,
  };

  return (
    <div>
      <Row style={{ marginBottom: '20px' }}>
        <Col span="24">
          <Card  {...appCardConfig}>
              <AppInfoCard data={appData}/>
          </Card>
        </Col>
      </Row>
      <Button type="primary" size={ 'default' } onClick={ toCreate }>新建</Button>
      <div className="query-result">
        <div>
          <Table size="middle" columns={ columns } dataSource={ moduleModel.list } pagination={ paginationInfo } />
        </div>
      </div>
      <DetailForm
        visible={ moduleModel.showDetailModal }
        title={ moduleModel.detailModalTitle }
        { ...moduleModel }
        onCancel= { cancelSubmit }
        onSubmit= { doSubmit }
        width={ 1200 }
      />
      <Query
        visible={ moduleModel.showQueryModal }
        title={'数据搜索'}
        entity={ moduleModel.entity }
        appData={ appData }
        onCancel={ closeQueryModal }
        onQuerySubmit={ handleQuerySubmit }
        onDataQueryTypeChange={ onDataQueryTypeChange }
        dataQueryResult={ moduleModel.dataQueryResult }
      />
    </div>
  );
}

List.propTypes = {
  dispatch: PropTypes.func.isRequired,
  index: PropTypes.object.isRequired,
};

export default connect(({ index }) => ({ index }))(List);
